<div class="sidebar" @slideRight *ngIf="modal.visible">


	<div class="sidebar-content no-padding">
		<app-header [transparent]="true" [back]="true">
			<div header-back (click)="modal.onClose()">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
					stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
					class="ai ai-ArrowLeft">
					<path d="M11 5l-7 7 7 7" />
					<path d="M4 12h16" />
				</svg>
			</div>
		</app-header>

		<div appLoader [loading]="loading" class="container">
			<div class="artist">
				<div class="artist-header">
					<div class="image">
						<img [src]="artist.picture || '/assets/app-icon-text.png'" />
					</div>
					<div class="details">
						<h1>{{ artist.name }}</h1>
						<p>{{ artist.bio }}</p>


					</div>
				</div>

				<div class="tags">
					<div *ngFor="let tag of artist.tags" class="tag">
						{{ tag }}
					</div>
				</div>

				<h3>Similar Artists</h3>
				<div class="tags">
					<div *ngFor="let similar of artist.similar" class="tag" (click)="onSearch(similar)">{{
						similar
						}}</div>

				</div>

				<ng-container *ngIf="albums.length > 0">
					<h3>Albums</h3>
					<div appDragScroll class="artist-albums">


						<ng-container *ngFor="let album of albums; ">
							<div appRipple (click)="onAlbum(album._id)" class="album">
								<img [src]="album.picture || '/assets/app-icon-text.png'" />
								<div class="column-details">
									<div class="title">{{ album.name }}</div>
									<div class="subtitle">{{ album.artist.name }}</div>
								</div>
							</div>
						</ng-container>

					</div>
				</ng-container>

				<ng-container *ngIf="tracks.length > 0">
					<h3 (click)="onPlayTracks()">Popular</h3>


					<div class="tracks">
						<div class="track" *ngFor="let track of tracks">
							<app-track-item [track]="track"></app-track-item>
						</div>
					</div>

				</ng-container>
			</div>
		</div>
	</div>
</div>